<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>城市道路主题登录</title>
</head>
<style>
    html {
        height: 100%;
    }

    body {
        z-index: 1;
        margin: 0;
        background-image: url('../assets/image/login/城市背景登录页.png');
        background-repeat: no-repeat;
        overflow-x: hidden;
        overflow-y: auto;
        background-color: #02131F;
    }


    .loginBgI {
        z-index: 2;
        width: 100%;
        height: 100%;
    }
    /* 登录头 */
    .trapezoidHead {
        border-top: 70px solid rgba(255, 255, 255, 0.05);
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        margin-left: 19%;
        height: 0;
        width: 60%;
        color: white;
        font-size: 28px;
    }
    .titleName{
        position: relative;
        top: -55px;
        text-align: center;
    }

/* 心形图案 */
    .heart {
        width: 160px;
        height: 200px;
        position: relative
    }

    .heart:before {
        content: " ";
        border: 0 solid transparent;
        -moz-border-radius: 100px;
        -webkit-border-radius: 100px;
        border-radius: 100px 100px 0 0;
        width: 80px;
        height: 120px;
        background: #669;
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        position: absolute;
        left: 20px;
    }

    .heart:after {
        content: " ";
        border: 0 solid transparent;
        -moz-border-radius: 100px;
        -webkit-border-radius: 100px;
        border-radius: 100px 100px 0 0;
        width: 80px;
        height: 120px;
        background: #669;
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        position: absolute;
        left: 48px;
        top: 0px;
    }
</style>


<body>
    <div class="loginBgI">

        <div class="trapezoidHead">
            <div class="titleName">城市道路主题登录</div>
        </div>




    </div>
</body>

</html>